<template>
  <div class="credit-container">
    <!-- head return-->
    <van-nav-bar title="查看余额" style="background: #ededed">
      <template #left>
        <van-icon name="arrow-left" size="24" color="black" @click="$router.push({ name: 'acchome' })" />
      </template>
    </van-nav-bar>

    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <div class="point-list-box">
        <div class="point-amount">
          <van-icon name="gold-coin" />
          <span>{{ balance }}</span>
          <span>余额</span>
        </div>
        <div class="point-list" v-for="item in initUserCredit" :key="item.id" @click="$router.push({ name: 'orderdetail', params: { item: item, isPaid: true } })">
          <div class="shops-name">
            <span>{{ item.name }}</span>
          </div>
          <div class="invoice-id">
            <span>{{ item.invoice_id }}</span>
          </div>
          <div class="add-point">
            <van-tag color="#d4ffd1" size="large" type="warning" round>+${{ item.add_credit }}</van-tag>
          </div>
          <div class="sub-point">
            <van-tag color="#ffd1d1" size="large" type="danger" round>-${{ item.minus_credit }}</van-tag>
          </div>
          <div class="point-date">
            <span>{{ item.updated_at }}</span>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'

export default {
  name: 'Credit',
  data() {
    return {
      isLoading: false
    }
  },
  created() {
    this.initGetUserCredit()
  },
  computed: {
    ...mapState({
      userCredit: state => state.account.userCredit,
      shopsList: state => state.home.shopsList,
      userAssets: state => state.account.userAssets
    }),
    balance() {
      return this.userAssets.balance
    },
    // 整理余额数据
    initUserCredit() {
      var list = this.userCredit
      var shops = this.shopsList
      list.forEach(item => {
        var date = item.updated_at
        var time = moment().format(this.$moment.TZ(date))
        var times = new Date(time).toString().split(' ')
        var str = times[1] + ' ' + times[2] + ' ' + times[3]
        item.updated_at = str

        var closeTime = item.invoice.datetime_close
        var createTime = item.created_at
        item.invoice.datetime_close = this.$moment.TZ(closeTime)
        item.created_at = this.$moment.TZ(createTime)
        shops.some(o => {
          if (o.license_id === item.license_id) {
            item.name = o.name
            return true
          }
        })
      })
      return list
    }
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
        setTimeout(() => {
          this.initGetUserCredit()
        }, 300)
      }, 1000)
    },
    initGetUserCredit() {
      this.$load.start()
      this.$store.dispatch('getUserCredit').then(msg => {
        if (msg) return this.$msg.danger(msg)
        this.$load.done()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.point-container {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background-color: #ededed;
}
.van-nav-bar {
  position: fixed;
  width: 100%;
  max-width: 640px;
  z-index: 3;
}
.van-pull-refresh {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 46px;
}
.point-list-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  // top: 46px;
  .point-amount {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 180px;
    border-radius: 9px;
    margin-bottom: 0.2em;
    background-color: white;
    .van-icon-gold-coin {
      margin-bottom: 0.6em;
      font-size: 2.1em;
      color: #ffbf05;
    }
    span:nth-child(2) {
      margin: 0.36em 0;
      font-size: 1.2em;
      font-weight: 500;
      color: #ffbf05;
    }
  }
  .point-list {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 97%;
    height: 40px;
    border-radius: 9px;
    margin: 0.2em 0;
    padding: 0 0.3em;
    background-color: white;
    .shops-name,
    .point-date {
      width: 27%;
      white-space: nowrap;
      font-size: 0.85em;
      text-align: center;
    }
    .shops-name {
      width: 18%;
    }
    .add-point,
    .sub-point {
      width: 18%;
    }
    .invoice-id,
    .add-point,
    .sub-point {
      display: flex;
      justify-content: center;
      width: 17%;
      font-size: 0.85em;
      .van-tag {
        display: flex;
        justify-content: center;
        width: 90%;
        opacity: 0.9;
        font-size: 0.75em;
      }
      .van-tag--warning {
        color: green;
      }
      .van-tag--danger {
        color: red;
      }
    }
  }
}
</style>
